<!DOCTYPE html>
            <html lang="zh">
        
            <head>
                <meta charset="UTF-8">
                <meta content="Javascript最热前端框架,webpack简单打包配置与入门爱尚博客,www.aijiumai.cn,aijiumai.cn,前端趋势,微信小程序制作,小程序教程,前端怎么做app,app制作,网站开发,靠谱的网站开发,app开发,小程序开发,小程序开发多少钱,app开发多少钱,网站开发多少钱"
                    name="Keywords">
                <meta name="description" content="webpack简单打包配置与入门-爱尚博客-让前端萌新少走弯路的博客！" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
                <title>webpack简单打包配置与入门-爱尚博客-爱尚前端-www.aijiumai.cn</title>
                <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
                <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
                <script src="../../common/public.js"></script>
                <link rel="stylesheet" href="../../common/styles/atom-one-dark.css">
                <link rel="stylesheet" href="../../common/m.css">
                <link rel="stylesheet" href="../../assets/css/item.css">
            </head>
        
            <body><div class="box" v-cloak>
            <!-- 导航 -->
            <header>
                <div class="logo">爱尚博客</div>
                <div class="navs">
                    <a :href="item.url" v-for="(item,index) in nav" :key="item.Id" v-cloak>{{item.name}}</a>
                </div>
                <!-- 小屏幕nav -->
                <mu-menu cover placement="bottom-end" :open.sync="open">
                    <mu-button icon>
                        <mu-icon value="menu"></mu-icon>
                    </mu-button>
                    <mu-list slot="content">
                    <mu-list-item button v-for="(item,index) in nav" :key="item.Id" :href="item.url">
                        <mu-list-item-title>
                            {{item.name}}
                        </mu-list-item-title>
                    </mu-list-item>
                    </mu-list>
                </mu-menu>
                <!-- 小屏幕nav -->
            </header>
            <!-- 导航 -->
            <!-- 主体 -->
            <article>
                <section>
                    <mu-card>
                        <!-- <mu-card-media title="Image Title" sub-title="Image Sub Title">
                        </mu-card-media> -->
                        <mu-card-title title="webpack简单打包配置与入门" sub-title="2019-01-13 22:17:17"></mu-card-title>
                        <mu-card-text>
                            <p>最近有小伙伴问我，webpack怎么弄？今天我就抽空写一遍webpack简单的配置。</p>
<p>首先确保你有安装node哦，node这边就不仔细的说明的，直接载中安装就行了，和普通应用程序安装差不多。node下载地址：<a href="https://nodejs.org/zh-cn/">https://nodejs.org/zh-cn/</a></p>
<p>推荐大家使用nvm来安装。nvm安装方式也是一样，下载安装就行：nvm下载地址：https ://github.com/coreybutler/nvm-windows/releases</p>
<p>演示中我使用的 node 版本是 v8.0.0</p>
<p>完成了上面的就开始了！</p>
<p>第一步：桌面打开小黑窗，我们直接进行全局的安装（shift 鼠标右键）输入：npm install webpack webpack-cli -g</p>
<p>安装成功后 输入：webpack -h</p>
<p>可以查看查看当前安装的版本信息。以及可以使用的指令。</p>
<p>第二步：我们都应该将webapck安装到当前的项目依赖中，此时就可以使用项目的本这样就可以使用项目本地版本的 webpack。</p>
<p>在项目文件中输入 ：npm init</p>
<p>如果有 package.json 就跳过，没有就输入直接全部回车就好了，安装依赖输入 ：npm install webpack webpack-cli —save-dev</p>
<p>安装成功后，我们的 package.json 的结构就是这样子的：</p>
<pre><code class="lang-json">{
  &quot;name&quot;: &quot;app&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo &quot;Error: no test specified&quot; &amp;&amp; exit 1&quot;
  },
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;devDependencies&quot;: {
    &quot;webpack&quot;: &quot;^4.25.1&quot;,
    &quot;webpack-cli&quot;: &quot;^3.1.2&quot;
  }
}
</code></pre>
<p>到了这一步，我们的环境就算是搭建好了，但是还没全部弄好，接着我们在项目文件中新建两个文件夹  app 和 public ，在app文件夹中新建两个js文件 Greeter.js 和</p>
<p>main.js </p>
<p>在 public 中新建 index.html</p>
<p>在 index.html 中写入：</p>
<pre><code class="lang-html">&lt;!-- index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;我的打一个webpack打包项目&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&#39;root&#39;&gt;
    &lt;/div&gt;
    &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>在Greeter.js 写入：</p>
<pre><code class="lang-javascript">module.exports = function() {
    var greet = document.createElement(&#39;div&#39;);
    greet.textContent = &quot;打包成功啦~&quot;;
    return greet;
  };
</code></pre>
<p>在main.js 中写入（其实main.js就是入口文件）：</p>
<pre><code class="lang-javascript">//main.js 
const greeter = require(&#39;./Greeter.js&#39;);
document.querySelector(&quot;#root&quot;).appendChild(greeter());
</code></pre>
<p>文件都已经创建成功了，那么就开始我们的打包吧！  </p>
<p>方法一：在项目中打开小黑窗（shift 鼠标右键）输入：webpack  app/main.js -o public/bundle.js（app/main.js：就是入口文件，public/bundle.js：就是输入文件，-o是字母o不是0）；</p>
<p>不出问题到了这一步就成功了，然后打开index.html 看看是不是有显示说 【打包成功啦~】这几个字，有就代表成功了，没有就看看小黑窗哪里抱什么错，一步一步的去解决，</p>
<p>方法二：在项目中新建一个文件 命名：webpack.config.js  中输入：</p>
<pre><code class="lang-javascript">module.exports = {
    entry:  __dirname + &quot;/app/main.js&quot;,//已多次提及的唯一入口文件
    output: {
      path: __dirname + &quot;/public&quot;,//打包后的文件存放的地方
      filename: &quot;bundle.js&quot;//打包后输出文件的文件名
    }
  }
</code></pre>
<p>记住，使用第二种方法需要在 package.json 中加入 “start”: “webpack”</p>
<pre><code class="lang-json">{
  &quot;name&quot;: &quot;app&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo &quot;Error: no test specified&quot; &amp;&amp; exit 1&quot;,
    &quot;start&quot;: &quot;webpack&quot;
  },
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;devDependencies&quot;: {
    &quot;webpack&quot;: &quot;^4.25.1&quot;,
    &quot;webpack-cli&quot;: &quot;^3.1.2&quot;
  }
}
</code></pre>
<p>现在我们就可以在黑窗口输入 ：npm start  即可执行和方法一 一样的功能。</p>
<p>使用 webpack 构建本地服务器，为什么要搭建本地服务器？他可以让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖<br>第一步：在项目中打开小黑窗 输入：npm install —save-dev webpack-dev-server</p>
<p>安装完成后，把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示</p>
<pre><code class="lang-javascript">module.exports = {
    devtool: &#39;eval-source-map&#39;,
    entry:  __dirname + &quot;/app/main.js&quot;,
    output: {
      path: __dirname + &quot;/public&quot;,
      filename: &quot;bundle.js&quot;
    },
    devServer: {
      contentBase: &quot;./public&quot;,//本地服务器所加载的页面所在的目录
      historyApiFallback: true,//不跳转
      inline: true//实时刷新
    }
  }
</code></pre>
<p>在package.json中的scripts对象中添加如下命令，用以开启本地服务器：</p>
<pre><code class="lang-json">{
  &quot;name&quot;: &quot;app&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo &quot;Error: no test specified&quot; &amp;&amp; exit 1&quot;,
    &quot;start&quot;: &quot;webpack&quot;,
    &quot;server&quot;: &quot;webpack-dev-server --open&quot;
  },
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;devDependencies&quot;: {
    &quot;webpack&quot;: &quot;^4.25.1&quot;,
    &quot;webpack-cli&quot;: &quot;^3.1.2&quot;,
    &quot;webpack-dev-server&quot;: &quot;^3.1.10&quot;
  }
}
</code></pre>
<p>在终端中输入npm run server即可在本地的8080端口查看结果</p>
<p>如果还是不清楚的话请下载demo：<a href="https://github.com/liuam007/webpack/tree/master">https://github.com/liuam007/webpack/tree/master</a></p>

                        </mu-card-text>
                        <mu-divider></mu-divider>
                        <!-- <mu-card-actions>
                            <a :href="item.href" v-for="(item,index) in datas" :key="index">
                                <mu-button flat>
                                    <span class="items_b" v-if="index!=1">上一篇：{{item.title}}</span>
                                    <span class="items_b" v-if="index==1">下一篇：{{item.title}}</span>
                                </mu-button>
                            </a>
                        </mu-card-actions>
                        <mu-divider></mu-divider> -->
                        <mu-card-actions>
                            <mu-button flat class="primary" @click.native="like_click()">
                                <div class="like">
                                    <!-- 点赞 -->
                                </div>
                            </mu-button>
                            <mu-button flat @click.native="gift_click()">
                                <div class="gift">
                                    <!-- 打赏 -->
                                </div>
                            </mu-button>
                        </mu-card-actions>
                    </mu-card>
                    <mu-card>
                        <div id="SOHUCS">
                            <!-- 感谢畅言 -->
                        </div>
                    </mu-card>
                </section>
                <!-- 侧边 -->
                <aside>
                    <mu-container>
                        <mu-expansion-panel :expand="expands">
                            <div slot="header">标签</div>
                            <mu-button color="primary" v-for="(item,index) in tag" :key="item.Id" v-cloak>{{item.name}}</mu-button>
                        </mu-expansion-panel>
                        <mu-expansion-panel :expand="expands">
                            <div slot="header">爱尚博客小程序</div>
                            <img src="../../image/xcx.jpg" alt="爱尚博客小程序">
                        </mu-expansion-panel>
                        <mu-expansion-panel :expand="expands">
                            <div slot="header">最近更新</div>
                            <mu-list>
                                <mu-tooltip :content="set_tips(item.timer,1)" v-for="(item,index) in new_items" :key="item.Id"
                                    placement="top">
                                    <a :href="item.href" target="_blank">
                                        <mu-list-item button :ripple="false">
                                            <mu-list-item-action v-cloak>
                                                {{index+1}}
                                            </mu-list-item-action>
                                            <mu-list-item-title v-cloak>{{item.title}}</mu-list-item-title>
                                        </mu-list-item>
                                    </a>
                                </mu-tooltip>
                            </mu-list>
                        </mu-expansion-panel>
                        <mu-expansion-panel :expand="expands">
                            <div slot="header">查看最多</div>
                            <mu-list>
                                <mu-tooltip :content="set_tips(item.look_num)" v-for="(item,index) in hot_items" :key="item.Id"
                                    placement="top">
                                    <a :href="item.href" target="_blank">
                                        <mu-list-item button :ripple="false">
                                            <mu-list-item-action v-if="index <= 2">
                                                <mu-badge :content="index+1" color="secondary"></mu-badge>
                                            </mu-list-item-action>
                                            <mu-list-item-action v-if="index > 2">
                                                <mu-badge :content="index+1"></mu-badge>
                                            </mu-list-item-action>
                                            <mu-list-item-title v-cloak>{{item.title}}</mu-list-item-title>
                                        </mu-list-item>
                                    </a>
                                </mu-tooltip>
                            </mu-list>
                        </mu-expansion-panel>
                        <mu-expansion-panel :expand="expands">
                            <div slot="header">看个广告</div>
                            <mu-carousel transition="fade" v-if="ad_data">
                            <mu-carousel-item v-for="(item,index) in ad_data" :key="item.Id">
                                <a :href="item.href">
                                    <img :src="item.ad_img" :alt="item.name">
                                </a>
                            </mu-carousel-item>
                        </mu-carousel>
                        </mu-expansion-panel>
                    </mu-container>
                </aside>
                <!-- 侧边 -->
                <!-- 底部 -->
                <footer class="foot">
                    <div class="link">
                        友情链接：
                        <a :href="item.url" v-for="(item,index) in links" :key="item.Id" :title="item.beizhu" target="_blank">
                            <mu-button color="primary" flat v-cloak>{{item.name}}</mu-button>
                        </a>
                    </div>
                    <div class="footer_bm">
                        <p>
                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011802000140&token=da834af7-3426-45c3-b0b6-437f55b4aa7d"
                                target="_blank" title="粤公网安备-44011802000140号"><img src="https://www.aijiumai.cn/image/beianbgs.png"
                                    alt="粤公网安备-44011802000140号" width="30px" height="30px"> 粤公网安备-44011802000140号</a>
                            &nbsp;
                            <a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备15074775">粤ICP备15074775号-1</a>
                        </p>
                        <p>
                            © 爱尚博客 &nbsp;<a href="https://www.aijiumai.cn">www.aijiumai.cn</a> &nbsp;
                            <a href="../../sitemap.xml">网站地图</a>
                        </p>
                    </div>
                </footer>
                <!-- 底部 -->
            </article>
            <!-- 主体 -->
            <!-- 打赏 -->
            <mu-container v-if="openAlert">
                <mu-dialog title="支持一下下嘛?" width="450" max-width="80%" :esc-press-close="false" :overlay-close="false"
                    :open.sync="openAlert">
                    <img src="../../image/3q.png" alt="">
                    <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">考虑一下</mu-button>
                    <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">我不！</mu-button>
                </mu-dialog>
            </mu-container>
            <!-- 打赏 -->
            </div>
            </body>
            <script src="../../common/v.js"></script>
            <script src="../../common/a.js"></script>
            <script src="../../common/m.js"></script>
            <script src="../../common/highlight.pack.js"></script>
            <script src="../../assets/js/item.js"></script>
            </html>